<template>
	<div class="PayNowContainer">
		<div class="PayNowHeader">
			<text class="PleasePay">请支付</text>
		</div>
		<div class="PayNowCon">
			<!-- 支付个人信息 盒子-->
			<div class="PayNow-Personal-Order-Information">
				<!-- 个人信息 -->
				<div class="Personal-Order-Information">
					<div class="info">
						<div class="infoimg">
							<van-image width="120" height="136" radius="10px" lazy-load :src="curObj.imageSrc" />
						</div>
						<div class="infotext">
							<div class="infoTitle">
								<span class="infoTitleText">{{curObj.title}}</span>
							</div>
							<div class="infoOrderType">
								<span>{{curObj.Ordertype}}</span>
							</div>
						</div>
						<div class="infoPrice">
							<span class="infoPriceText">￥<span class="priceNumber">399</span></span>
						</div>
					</div>


				</div>
				<!--  预约时间盒子-->
				<div class="Make-an-appointment">
					预约时间:<span>2023-10-5 16:18</span>
				</div>
				<!-- 优惠盒子 -->
				<div class="PreferentialBox">
					<div class="PreferentialBox-left">
						<span>优惠券</span>
					</div>
					<div class="PreferentialBox-right">
						<span>暂无优惠券</span>
					</div>
				</div>
				<!-- 小计盒子 -->
				<div class="subtotal">
					<span class="subtotalSpan">小计:</span><span class="subtotalPrice">￥<span
							class="subtotalText">399</span></span>
				</div>
				<!-- 详细订单信息 -->
				<div class="Detailed-Orders">
					<div class="DetaiL-Item">
						<div>
							订单信息
						</div>


					</div>
					<div class="DetaiL-Item">
						<div>
							收货信息
						</div>
						<div>落辰 2023-8-10 女</div>
					</div>
					<div class="DetaiL-Item Item">
						<div>
							订单编号
						</div>
						<div>
							110133906950283689

						</div>
						<div>
							<button class="copy">复制</button>
						</div>

					</div>
					<div class="DetaiL-Item">
						<div>创建时间</div>
						<div>
							2023- 8-24 0:56
						</div>
					</div>
					<div class="DetaiL-Item">
						<div>
							支付方法
						</div>
						<div>
							微信支付
						</div>
					</div>
				</div>
				<!-- 详细描述预约成功后解释 -->
				<ul class="AppointmentSuccessful">
					<li>预约成功后可修改六次时间。</li>
					<li>拍摄高峰可能稍需等待，如您无法按时到店，烦请提前与门店联系，我们会尽力协调，门店繁忙时可能无法安排拍摄或需改期。</li>
					<li>若拍摄前24小时内申请退款需收取订单金额的15%作为手续费。</li>
					<li>多个产品下单，若非同一人拍摄，须到店补差价</li>
					<li>为保障您的资金安全与自身权益，请杜绝与个人收款账号及手交易平台进行交易。</li>
				</ul>
				<!--  立即支付按钮-->
				<div>
					<!-- 384  80 -->
					<button class="PayNowBtn" @click="pay">立即支付</button>
				</div>

			</div>

		</div>
	</div>
</template>

<script lang="ts">
	import request from '../../utils/request.js'
	import qs from 'qs'
	export default {
		data() {
			return {
				_id: "",
				curObj: {},

			}
		},
		onLoad(options) {
			// 从 options 对象中获取 _id 参数
			// const _id = options._id;
			// console.log(this.$data._id,'this==')

			this.$data._id = options._id
			this.getDataId()
			// 现在您已经获取到了 _id，可以在此处进行相关业务逻辑处理
			// console.log('Received _id:', _id);
		},
		methods: {
			async getDataId() {
				console.log(this.$data._id, 'id===')
				let { data } = await request(`getAuctionOrdersById?_id=${this.$data._id}`)
				console.log(data.data)
				this.$data.curObj = data.data
				console.log(this.$data.curObj)

			},
			pay() {
				uni.redirectTo({
					url: '/pages/pay/pay'
				})
			},
			PayNowFn() {
				uni.redirectTo({
					url: '/pages/Order/Order?CurrentTabTitle=待拍摄'
				})
			}

		},

	};
</script>
<style scoped>
	.PayNowContainer {
		margin: 0;
		padding: 0;
		font-size: 12px;
		background-color: rgba(255, 255, 255, 1);
	}

	.PayNowHeader {
		height: 302px;
		line-height: 20px;
		background-color: rgba(224, 62, 54, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: left;
		font-family: Roboto;
		/* border: 1px solid rgba(187,187,187,1); */
	}

	.PleasePay {
		display: inline-block;
		color: white;
		margin-top: 20px;
		margin-left: 20px;
		/* font-family: "SourceHanSansSC-regular"; */

	}

	.priceNumber {
		color: gray;
	}

	.PayNow-Personal-Order-Information {
		position: absolute;
		left: 20px;
		top: 55px;
		width: 335px;
		height: 537px;
		line-height: 20px;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: center;
		box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.04);
		font-family: Roboto;
		/* border-radius: 20px; */
	}

	.Personal-Order-Information {
		margin-left: 15px;
		margin-top: 20px;

		/* height: 537px; */
		/* background-color: #101010 ; */

	}

	.info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 20px;
	}

	.Make-an-appointment {
		display: inline-block;

		margin-left: 15px;
		margin-top: 35px;
		width: 345px;
		height: 28px;
		line-height: 28px;
		color: rgba(51, 51, 51, 1);
		font-size: 16px;
		text-align: left;
		font-family: SourceHanSansSC-regular;
	}

	.PreferentialBox-left span {
		display: inline-block;
		/* 	margin-left: 15px;
	margin-top: 20px; */
		/* height: 28px;
	line-height: 28px; */
		color: rgb(51, 51, 51);
		font-size: 16px;
		text-align: left;
		font-family: SourceHanSansSC-regular;
	}

	.PreferentialBox-right span {
		display: inline-block;
		/* 	height: 28px;
	line-height: 28px; */
		color: rgba(149, 152, 166, 1);
		font-size: 16px;
		font-family: SourceHanSansSC-regular;
	}

	.PreferentialBox {
		margin-top: 20px;
		margin-left: 15px;
		margin-right: 15px;
		display: flex;
		justify-content: space-between;
		align-content: center;
	}

	.subtotalSpan {
		display: inline-block;
		color: rgb(51, 51, 51);
		font-size: 16px;
		font-family: SourceHan
	}

	.subtotalPrice {
		display: inline-block;


		color: rgb(51, 51, 51);
		font-size: 18px;
		text-align: left;
	}

	.subtotal {
		display: flex;
		justify-content: flex-end;
		margin-top: 20px;
		margin-right: 15px;

	}

	.Detailed-Orders {
		/* height: 449px; */
		margin-bottom: 20px;
		line-height: 20px;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(51, 51, 51, 1);
		font-size: 12px;
		text-align: center;
		box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.08);
		font-family: Roboto;
		margin-left: 20px;
		margin-right: 15px;

	}

	.DetaiL-Item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.Item {
		/* border: 1px solid red; */
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.copy {
		font-size: 15px;
	}

	.AppointmentSuccessful {
		/* border: 1px solid red; */
		list-style-type: circle;
		font-size: 10px;
	}

	.PayNowBtn {
		margin-top: 20px;
		width: 200px;
		height: 30px;
		line-height: 30px;
		border-radius: 15px;
		background-color: rgba(224, 62, 54, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 10px;
		text-align: center;
		font-family: Roboto;
	}
</style>